<template>
  <div class="user-container">
    <p class="common-list-bread">用户管理</p>
    <div class="common-query-box">
      <el-form :inline="true" :model="queryForm" labelWidth="90px">
        <el-form-item label="用户名称：">
             <el-input v-model="taskName"  placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
             <el-input v-model="taskName"  placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="部门：">
          <el-select v-model="queryForm.modelType"  placeholder="请选择" clearable filterable :popper-append-to-body="false" >
            <!-- <el-option label="全部" :value=null></el-option> -->
            <el-option v-for="typeValue in  departmentList"
            :key="typeValue.id" :label="typeValue.name"
            :value="typeValue.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属用户组：">
          <el-select v-model="queryForm.modelType" clearable placeholder="请选择" filterable :popper-append-to-body="false" >
            <!-- <el-option label="全部" :value=null></el-option> -->
            <el-option v-for="typeValue in permissionList"
            :key="typeValue.id" :label="typeValue.name"
            :value="typeValue.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
            <el-button class="common-btn-primary left" size="small" @click="asyncGetTableData">查询</el-button>
            <el-button class="common-btn-solid" size="small" @click="onClickRest">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table-box">
      <div class="common-table-btn-box">
        <el-button  class="common-btn-primary" size="small" @click="onclickAdd">添加用户</el-button>
      </div>
      <el-table :data="tableData" border >
         <el-table-column label="ID" width="110"  prop="batchNo" align="center"></el-table-column>
        <el-table-column prop="alias" label="用户名" min-width="100" align="left">
        </el-table-column>
        <el-table-column prop="alias" label="姓名" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="alias" label="部门" min-width="100" align="left">
        </el-table-column>
        <el-table-column prop="alias" label="所属用户组" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="alias" label="登录时间" min-width="100" align="left">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-has="'APM_edit'" class="common-btn-text" @click="onClickEdit(scope.row.id)"><i class="icon-ali-bianji"></i>编辑</el-button>
            <el-button v-has="'APM_delete'" class="common-btn-text common-table-delete" @click="onClickDelete(scope.row.id)">
              <i class="icon-ali-shanchu"></i>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <div v-if="isDialogVisible">
      <UserInfoDialog :infoType='infoType' :userId="userId" :isDialogVisible='isDialogVisible' @cancel='onClickCancelSave' @success='onClickAddSaveData'></UserInfoDialog>  
    </div> 
  </div>
</template>

<script>
  // import watchScroll from 'utils/watchScroll'
  // import UserInfoDialog from 'components/UserInfoDialog.vue'

  export default {
    // components: {
    //   UserInfoDialog
    // },
    data() {
      return {
        loading: false,
        currentPage: 1,
        pageSize: 100,
        total: 0,
        queryForm: {
          machineType: null,   //航空器类型
          modelType: null,    //机型
        },
        departmentList: [],    //所属部门集合 
        permissionList: [],    //所属用户组
        tableData: [],    //表格数据
        taskName: '',    //用户名称  


        infoType: 3,//1->新增 2->编辑 3->修改基础信息  用户入口
        userId: '',
        isDialogVisible: false,

      }
    },
    created() {
      // this.getQueryParams();
      this.asyncGetTableData();
      this.asyncGetDepartmentList();
      this.asyncGetPermissionList();
    },
    mounted() {
     /*  this.$nextTick(() => {
        document.querySelector('.M_content').addEventListener('scroll', watchScroll);
        window.addEventListener('resize', watchScroll);
      }); */
    },
    methods: {
      
      //获取列表数据???
      asyncGetTableData() {
        this.loading = true;
        this.$axios.get("/aerocraft/queryAerocraftModel", {
          params: {
            pageSize: this.pageSize,
            pageNum: this.currentPage,
            id: this.queryForm.modelType,
            aerocraftTypeId: this.queryForm.machineType,
          }
        }).then((res) => {
          this.loading = false;
          if (res.data.code === 200) {
            this.tableData = [];
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      //重置筛选数据
      onClickRest(){
        this.pageSize = 10;
        this.currentPage = 1;
      },
      //获取部门下拉框数据???
      asyncGetDepartmentList() {
        this.$axios.get("/aerocraft/listAllAerocraftType").then((res) => {
          if (res.data.code === 200) {
            this.departmentList = [...res.data.data];
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      //获取所有分组下拉列表
      asyncGetPermissionList() {
        this.$axios.get("/experimentGroup/getExperimentGroupList").then((res) => {
          if (res.data.code === 200) {
            this.permissionList = [...res.data.data];
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      //用户信息--弹框交互
      onClickCancelSave() {
        this.isDialogVisible = false;
      },
      //保存用户信息
      onClickAddSaveData() {
        this.isDialogVisible = false;
      },
      //点击添加
      onclickAdd() {
       this.infoType = 1;
       this.isDialogVisible = true;
      },
      //编辑
      onClickEdit(id) {
       this.infoType = 2;
       this.userId = id;
       this.isDialogVisible = true;
      },
      //删除???
      onClickDelete(id) {
          this.$confirm("确认删除吗？", "删除确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          showClose: false,
          type: "warning",
          center: true,
          customClass: "common-confirm-box",
          confirmButtonClass: "common-btn-primary",
          cancelButtonClass: "common-btn-text",
        }).then(() => {
          this.$axios
            .get("/user/deleteUser?id=" + id)
            .then((res) => {
              if (res.data.code === 200) {
                this.asyncGetTableData();
              } else {
                this.$message.error(res.data.msg);
              }
            });
        });

      },
      pageSizeChange(val) {
        this.pageSize = val;
        this.asyncGetTableData();
      },
      currentPageChange(val) {
        this.currentPage = val;
        this.asyncGetTableData();
      }
    }
  }
</script>
<style scoped>
.left{
  margin-left: 15px;
}
    .aircraft-list {
        border: 1px solid #C9C9D3;
        margin: 10px 0;
    }
    .aircraft-list-row {
        display: flex;
        padding: 13px 0 13px 10px;
        border-bottom: 1px solid #C9C9D3;
    }
    .aircraft-list-row.active {
        align-items: center;
        justify-content: center;
        color: #ccc;
    }
    .aircraft-list-row:last-child {
        border-bottom: none;
    }
    .list-row-item {
        flex: 1;
        cursor: pointer;
    }
    .list-row-item:hover {
        text-decoration: underline;
        color: var(--color-blue-main);
    }
</style>
